k<template>
    <!-- <my-header types="2" title="学习专区"></my-header> -->
    <my-header navText="学习专区" search="1"></my-header>
	<view class="container">
        <!-- 轮播 -->
		<view class="banner">

            <!-- <swiper class="swiper" circular :indicator-dots="indicatorDots"
                    :autoplay="autoplay" :interval="interval" :duration="duration">
                <swiper-item v-for="(item,index) in bannerList" :key="index" @click="subClick(item)">
                    <image :src="item.pic" style="width: 100%;height: 210px;" mode=""></image>
                </swiper-item>
            </swiper> -->

            <up-swiper :list="bannerList" @click="subClick" circular="false" height="210px" keyName="pic" @change="changelu" style="height: 200px;">
                <template #indicator>
                    <view class="indicator">
                        <view class="indicator__dot" v-for="(item, index) in bannerList" :key="index" 
                        :class="[index == current && 'indicator__dot--active']">
                    </view>
                </view>
                </template>
            </up-swiper>
        </view>

		<view class="carousel">
            <view style="text-align: center;" class="item" v-for="(item, index) in studyTabList" :key="index" @click="itemChange(item)">
                <image :src="item.icon" style="height: 30px;width: 30px;"></image>
                <view class="imgFont">{{ item.title }}</view>
            </view>
        </view>
		<view class="study-title">
			<view class="titleLeft">精彩学习</view>
		</view>
		<view class="study-list">
            <my-page-list :newsList="newsList"></my-page-list>
        </view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useUserStore } from '@/stores'
	import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	import { getStudyLunboAPI, getStudyTabAPI } from '@/api/bannerList'
    import { getStudyArticleAPI } from '@/api/news'
    import dayjs from 'dayjs';
	const userStore = useUserStore()
	const indicatorDots = ref<any>(true)
    const autoplay = ref<any>(true)
    const interval = ref<any>(2000)
    const duration = ref<any>(500)
	const newsList = ref<any>([])
    const bannerList = ref<any>([])
    const studyTabList = ref<any>([])
    const current = ref<any>(0)
	// 获取学习轮播列表
    const getBannerList = async () =>{
        const ress: any = await getStudyLunboAPI()
        console.log('res->',ress)
        bannerList.value = ress
    }
    const changelu = (e:any) =>{
        current.value = e.current
    }
    //轮播点击事件
    const subClick = (item:any) =>{
        console.log('item',item)
        let items = bannerList.value[item]
        // return
        const detailType = getQueryParam(items.url)
        uni.navigateTo({
            url:`/pagesA/index/detail?${detailType}`
        })
        // uni.navigateTo({
        //     url:`detail?tid=${item.aid}`
        // })
    }
    //获取文章列表类型方法
    const getQueryParam =(url:any) => {
        const urlKey = url.split('?')[1]
        // console.log('urlKey->',urlKey)
        // const urlParams = new URLSearchParams(new URL(url).search);
        return urlKey;
    }
    //获取学习文章列表
    const getNewsList = async () =>{
        const res: any = await getStudyArticleAPI()
        console.log('res->-',res)
        newsList.value = res
        newsList.value.forEach((element: any) => {
            element.time = dayjs(element.dataline).format('YYYY-MM-DD')
            const srcMatch = element.avatar.match(/<img.*?src=["'](.*?)["']/);
            if (srcMatch && srcMatch[1]) {
            element.avatar = srcMatch[1]
            }
        })
    }
    //根据tag选择pageList
    const itemChange = (item:any)=>{
        uni.navigateTo({
            url:`pageTabList?id=${item.cateid}&title=${item.title}`
        })
    }
    //获取学习tag接口
    const getStudyTab = async () =>{
        const res: any = await getStudyTabAPI()
        console.log('学习resTab->>',res)
        studyTabList.value = res
    }
    onPullDownRefresh(()=>{
        getBannerList()
        getNewsList()
        getStudyTab() 
    })
    onLoad(() => {
        getBannerList()
        getNewsList()
        getStudyTab()
        // getStudyBanner()
    })
</script>

<style lang="scss">
	.container{
		font-family: 'PingFang SC';
        // margin-top: 88px;
		.banner{
			width: 100%;
			height: 210px;
            .indicator{
                @include flex(row);
                justify-content: center;
                .indicator__dot {
                    height: 3.93px;
                    width: 3.93px;
                    border-radius: 100px;
                    // background-color: rgba(255, 255, 255, 0.8);
                    opacity: 0.7;
                    background-color: #fff;
                    margin: 0 5px;
                    transition: background-color 0.3s;
                }
                .indicator__dot--active {
                        opacity: 1;
                        width: 12.46px;
                        height: 3.93px;
                        border-radius: 8px;
                        background-color: #ffffff;
                        // background-color: red;
                    }
            }
			// background-color: red;
            .swiper{
                height: 210px;
                width:100%
            }
		}
		.container-title{
			// width: 100%;
			// height: 60px;
			display: flex;
			padding: 22px 20px 16px 20px;
			flex-direction: row;
			align-items: center;
			// background-color: aliceblue;
			.titleLeft{
				flex: 1;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
				letter-spacing: 0px;
			}
			.titleRight{
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				/* color/info/active */
				color: #166CD8;
			}
		}
		.carousel{
			width: 100vw;
            display: flex;
            flex-direction: row;
            justify-content: center;
            // align-items: center;
			// height: 79px;
            margin: 20px 0;
            .item{
                flex: 1;
                align-content: center;
                margin: auto;
                .imgFont{
                    width: 100%;
                    text-align: center;
                    font-family: PingFang SC;
                    font-size: 14px;
                    font-weight: normal;
                    line-height: 14px;
                    letter-spacing: 0px;
                    // margin-left: 10px;
                    /* base/font/gy2 */
                    color: rgba(0, 0, 0, 0.6);
                }
            }
			// background-color: antiquewhite;
		}
		.study-title{
			display: flex;
			padding: 0px 20px 6px 20px;
			flex-direction: row;
			align-items: center;
			.titleLeft{
				flex: 1;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: 500;
				line-height: 26px;
				letter-spacing: 0px;
			}
			.titleRight{
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 22px;
				letter-spacing: 0px;
				
				/* color/info/active */
				color: #166CD8;
			}
			// background-color: blue;
		}
	}
</style>
